<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.css"></link>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/jquery-1.10.2.min.js"></script>
    <script src="/bootstrap.min.js"></script>
    <script src="/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
</head>
<body>
<div class="row">
    <div class="col-lg-6">
        <form action="getPublicAccountList.html" method="post" class="form-inline" id="searchForm">
            <input type="hidden" name="index" id="index">
            <div class="form-group">
                <label>账号类型</label>
                <select class="form-control" name="typeId">
                    <option value="">请选择</option>
                    <option th:value="${type.id}" th:each="type:${accountTypes}" th:text="${type.name}" th:selected="${accountSearch.typeId!=null?type.id==accountSearch.typeId:false}">
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label>公众号/名称</label>
                <input type="text" class="form-control" placeholder="公众号或名称" name="accountOrName" th:value="${param.accountOrName}">
            </div>
            <div class="form-group span6">
                <label>创建时间</label>
                <input class="form-control" size="10" type="text" id="startTime" name="startTime" th:value="${param.startTime}"> -
                <input class="form-control" size="10" type="text" id="endTime"  name="endTime" th:value="${param.endTime}">
            </div>
            <div class="form-group">
                <button type="submit" class="btn">查询</button> <button type="button" class="btn btn-success">添加</button>
            </div>
        </form>
        <table class="table table-striped table-bordered" style="margin-top:20px">
            <tr>
                <td>ID</td>
                <td>公众号</td>
                <td>名称</td>
                <td>类型</td>
                <td>创建时间</td>
                <td>认证</td>
                <td>操作</td>
            </tr>
            <tr th:each="publicAccount:${publicAccountPage.list}">
                <td th:text="${publicAccount.id}"></td>
                <td  th:text="${publicAccount.account}" ></td>
                <td  th:text="${publicAccount.name}" ></td>
                <td  th:text="${publicAccount.accountType.name}" ></td>
                <td  th:text="${#dates.format(publicAccount.createdTime,'yyyy-MM-dd')}" ></td>
                <td  th:text="${publicAccount.status==1?'认证':'未认证'}"> </td>
                <td><a th:href="${'/getPublicAccountById.html?id='+publicAccount.id}">修改</a> <a href="#">删除</a></td>
            </tr>
        </table>
        <ul class="pagination">
            <!--不可点击的样式-->
            <li th:class="${publicAccountPage.isFirstPage?'disabled':''}" ><a href="#"   th:style="${publicAccountPage.isFirstPage?'pointer-events:none;':''}"  onclick="changePage(1)">首页</a></li>
            <li th:class="${publicAccountPage.isFirstPage?'disabled':''}" ><a href="#"  th:style="${publicAccountPage.isFirstPage?'pointer-events:none;':''}"  th:onclick="changePage([[${publicAccountPage.prePage}]])" >上一页</a></li>
            <li th:each="i:${publicAccountPage.navigatepageNums}" th:class="${publicAccountPage.pageNum==i?'active':''}"><a href="#" th:text="${i}" th:onclick="changePage([[${i}]])"></a></li>
            <li th:class="${publicAccountPage.isLastPage?'disabled':''}" ><a href="#"  th:style="${publicAccountPage.isLastPage?'pointer-events:none;':''}"  th:onclick=" changePage([[${publicAccountPage.nextPage}]])"  >下一页</a></li>
            <li th:class="${publicAccountPage.isLastPage?'disabled':''}" ><a href="#" th:style="${publicAccountPage.isLastPage?'pointer-events:none;':''}"  th:onclick=" changePage([[${publicAccountPage.pages}]])"  >末页</a></li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        $('#startTime').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            minView: 2
        });
        $('#endTime').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            minView: 2
        });
    })
    function changePage(index) {
        $('#index').val(index);
        $('#searchForm').submit();
    }
</script>
</body>
</html>